/<template>
  <div class="drawer-box-wrapper right-box" v-show="visiable">
    <main class="taskCase_container">
      <h2>推理应用列表</h2>
      <header class="flex flex-between">
        <div class="aside">
          <el-form
            :inline="true"
            :model="queryParams"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="需求编号：">
              <el-input
                v-model="queryParams.xqid"
                v-no-space
                placeholder="请输入需求编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="需求名称：">
              <el-input
                v-model="queryParams.xqmc"
                v-no-space
                placeholder="请输入需求名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="时间区间：">
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleTimeRangeChange"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </header>
      <main class="table_container">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          stripe
          class="mainTable"
          height="40vh"
          ref="rightMultipleTable"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="tableData[props.$index].gcxqPointList"
                style="width: 100%"
              >
                <el-table-column label="序号" width="80" type="index" />
                <el-table-column
                  show-overflow-tooltip
                  label="目标编号"
                  prop="mbbh"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="经度"
                  prop="pointJd"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="纬度"
                  prop="pointWd"
                />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="需求名称" prop="xqmc" />
          <el-table-column show-overflow-tooltip label="需求编号" prop="xqid" />
          <el-table-column show-overflow-tooltip label="任务类型" prop="rwlx">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="目标形态" prop="mbxt">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="气象条件" prop="qxtj">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="攻击因素" prop="gjys">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="是否合作目标"
            prop="sfhzmb"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip label="载荷类型" prop="zhlx">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="工作模式" prop="gzms">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="分辨率(m)" prop="fbl">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="优先级" prop="yxj">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="需求开始时间"
            prop="xqkssj"
          />
          <el-table-column
            show-overflow-tooltip
            label="需求结束时间"
            prop="xqjssj"
          />
        </el-table>
      </main>
      <footer class="fl_row_start">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageCurrent"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </footer>
    </main>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import {
  DeletePlanTasks,
  GetPlanTasksList
} from '@/api/decisionManage/index.js'
import { reasoningApplicationDelete } from '@/api/reasoningApplication/index.js'

export default {
  components: {},
  data() {
    return {
      visiable: false,
      queryParams: {
        pageCurrent: 1,
        pageSize: 10,
        xqid: null,
        xqmc: '',
        startTime: '',
        endTime: ''
      },
      total: 0,
      options: [
        {
          value: '值1',
          label: '选项1'
        },
        {
          value: '值2',
          label: '选项2'
        }
      ],
      tableData: [],
      currentPage3: 5,
      dialogVisible: false,
      importVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      taskCaseBool: 0,
      tableLoading: false,
      tableSelect: [],
      relayParam: [],
      LoadingTask: '',
      timeRange: []
    }
  },
  watch: {
    visiable(val) {
      if (val) {
        this.getReasoningApplicationList()
      }
    }
  },
  mounted() {
    this.$bus.$on('openRight', bool => {
      this.visiable = bool
      this.$store.dispatch('drawer/setrightvisible', true)
    })
  },
  methods: {
    ...mapActions({
      setrightvisible: 'drawer/setrightvisible'
    }),

    // 处理时间
    handleTimeRangeChange(time) {
      if (time != null) {
        this.queryParams.startTime = time[0]
        this.queryParams.endTime = time[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
    },

    handleDetailReasoning(rowValue) {
      this.$bus.$emit('openLeft', rowValue, true)
      this.$store.dispatch('drawer/setrightvisible', false)
      this.visiable = false
    },

    handleEditReasoning(rowValue) {
      this.$bus.$emit('openLeft', rowValue, false)
      this.$store.dispatch('drawer/setrightvisible', false)
      this.visiable = false
    },
    handleRemoveReasoning(val) {
      const idList = []
      if (val.xqId) {
        idList[0] = val.xqId
      } else {
        this.tableSelect.forEach(item => {
          idList.push(item.xqId)
        })
      }
      const data = {
        ids: idList
      }
      if (idList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择删除项'
        })
        return false
      }

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        reasoningApplicationDelete(data).then(response => {
          if (response.data.code !== 200) {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
            return false
          }
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getReasoningApplicationList()
        })
      })
    },
    // 查询
    onSubmit() {
      this.queryParams.pageCurrent = 1
      this.getReasoningApplicationList()
    },
    // 重置
    onReset() {
      this.queryParams.xqid = ''
      this.timeRange = null
      this.queryParams.xqmc = ''
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.queryParams.pageCurrent = 1
      this.getReasoningApplicationList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.queryParams.pageCurrent = val
      this.getReasoningApplicationList()
    },
    /** 获取引用列表 */
    getReasoningApplicationList() {
      this.tableLoading = true
      GetPlanTasksList(this.queryParams).then(response => {
        if (response.data.code == 200) {
          this.tableData = response.data.data.records
          this.total = response.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: '获取失败'
          })
        }
        this.tableLoading = false
      })
    },

    /** 删除任务筹划 */
    DeletePlanTasks(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const idParam = {
            ids: [row.id]
          }
          DeletePlanTasks(idParam).then(response => {
            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.queryParams.pageCurrent = 1
              this.getReasoningApplicationList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
        .catch(() => {
          console.log('Cancel')
        })
    }
  },
  beforeDestroy() {
    this.$bus.$off('openRight')
  }
}
</script>

<style src="../index.scss" lang="scss"></style>
